<!--
 * @Author: ruins
 * @Date: 2022-01-17 21:06:23
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-18 15:56:30
 * @FilePath: \white-dragon\src\views\Position\components\Company.vue
-->
<template>
  <div>
    <!-- 招聘列表 -->
    <ul class="company-list">
      <!-- 招聘项 -->
      <li
        class="company-item"
        v-for="item in companyList"
        :key="item.id"
        @mouseenter="item.comFlag = true"
        @mouseleave="item.comFlag = false"
        @click="toInfo(item)"
      >
        <div class="company-content">
          <el-row class="top-info">
            <!-- 左侧 -->
            <el-col :span="13">
              <!-- 职位 -->
              <div class="title">
                <span>{{ item.position }}</span>

                <span
                  class="address"
                >[{{ item.address[0] }}-{{ item.address[1] }}-{{ item.address[2] }}]</span>
              </div>

              <!-- 要求 -->
              <div class="condition">
                <!-- 薪资 -->
                <span class="salary">
                  {{ item.salary[0] }}-{{ item.salary[1] }}K
                  <span
                    class="none-padding"
                    v-if="item.salary[2]"
                  >·{{ item.salary[2] }}薪</span>
                </span>
                <!-- 工作经验 -->
                <span class="experience">{{ item.experience }}</span>
                <!-- 分割线 -->
                <em class="vline" />
                <!-- 学历 -->
                <span class="education">{{ item.education }}</span>
                <!-- 招聘人员 -->
                <el-button round size="mini" v-show="!item.comFlag">
                  {{ item.rname }}
                  <em class="vline" />
                  {{ item.rposition }}
                </el-button>
                <!-- 立即沟通 -->
                <el-button round size="mini" type="primary" v-show="item.comFlag">
                  <i class="el-icon-chat-dot-round"></i> 立即沟通
                </el-button>
              </div>
            </el-col>

            <!-- 右侧 -->
            <el-col :span="11">
              <el-row type="flex">
                <!-- 公司信息 -->
                <el-col :span="20">
                  <!-- 公司名称 -->
                  <div class="title">{{ item.cname }}</div>
                  <!-- 公司业务范围 -->
                  <span>{{ item.industry }}</span>
                  <em class="vline"></em>
                  <span>{{ item.companyState }}</span>
                  <em class="vline"></em>
                  <span>{{ item.employees | employees }}</span>
                </el-col>
                <!-- 图片 -->
                <el-col :span="4">
                  <el-image style="width: 54px; height: 54px" :src="item.cimg" fit="cover" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <!-- 底部信息 -->
          <el-row type="flex" class="bottom-info">
            <!-- 技术 -->
            <el-col :span="13">
              <el-tag
                v-for="tag in item.tags"
                :key="tag"
                size="mini"
                effect="plain"
                style="margin-right: 6px;"
              >{{ tag }}</el-tag>
            </el-col>
            <!-- 待遇 -->
            <el-col :span="11">
              <p class="welfare">{{ item.welfare | welfare }}</p>
            </el-col>
          </el-row>
        </div>
      </li>
    </ul>
    <!-- 空状态 -->
    <el-empty v-show="companyList.length === 0" :image-size="200"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'Company',
  props: {
    companyList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      /* 沟通标识 */
      comFlag: false
    }
  },
  components: {},
  computed: {},
  watch: {},
  filters: {
    employees (value) {
      if (value.length < 2) {
        return '10000人以上'
      }
      return `${value[0]}-${value[1]}人`
    },
    welfare (value) {
      return value.join('，')
    }
  },
  methods: {
    /*  */
    toInfo (item) {
      this.$router.push({ name: 'postionInfo', params: item })
    }
  },
  created () { },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.company-list {
  padding-left: 0;
  width: 984px;
  margin: 0 auto;

  .none-padding {
    padding: none !important;
  }

  .vline {
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }

  .company-item {
    height: 130px;
    margin-bottom: 10px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    .company-content {
      padding-top: 20px;

      span {
        display: inline-block;
      }

      .top-info,
      .bottom-info {
        padding: 0 28px;
      }

      .title {
        color: #00c2b3;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;

        .address {
          padding-left: 12px;
        }
      }
      .education {
        margin-right: 10px;
      }

      .condition {
        vertical-align: middle;

        .salary {
          height: 26px;
          line-height: 26px;
          color: #fc703e;
          margin-right: 10px;
        }

        ::v-deep .el-button--mini {
          padding: 4px 12px;
        }
      }
    }
    .welfare {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    .bottom-info {
      background-color: #f8f9fc;
      align-items: center;
      padding: 0 12px;
      font-size: 13px;
    }
  }
}
</style>
